<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/fragment::top">

</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div th:replace="common/fragment::leftmenu"></div>
        <!--End 左侧导航-->

        <!--头部信息-->
        <div th:replace="common/fragment::header"></div>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">
                <div>
                    <!--订单-->
                    <form action="#!" class="horizontal " id="add-user-form" method="post">
                        <div class="form-group col-md-10 ">
                            <!--订单号-->
                            <label class="col-md-2 control-label" for="sellno"
                                   style="text-align: center;line-height: 36px">订单号</label>
                            <div class="col-md-3">
                                <input hidden="hidden" id="sellstatus" th:value="${sell.status}"></input>
                                <input hidden="hidden" id="sellid" th:value="${sell.id}"></input>
                                <input class="form-control" id="sellno" name="sellno"
                                       placeholder="订单号" readonly th:value="${sell.name}"
                                       type="text">
                            </div>
                            <!--END订单号-->
                            <!--生成日期-->
                            <label class="col-md-2 control-label" for="ctime"
                                   style="text-align: center;line-height: 36px">生成日期</label>
                            <div class="col-md-3">
                                <input class="form-control" id="ctime" name="ctime"
                                       placeholder="生成日期" readonly
                                       th:value="${#dates.format(sell.createTime, 'yyyy-MM-dd')}" type="text">

                            </div>
                            <!--END生成日期-->
                        </div>


                        <div class="form-group col-md-10 ">
                            <!--供应商-->
                            <label class="col-md-2 control-label" for="cust"
                                   style="text-align: center;line-height: 36px">顾客</label>
                            <div class="col-md-3">
<!--                                <input hidden="hidden" id="custid" th:value="${sell.custPO.id}" type="text">-->
                                <input class="form-control" id="cust" name="cust"
                                       placeholder="顾客" readonly
                                       th:value="${sell.custPO.name}" type="text">
                            </div>
                            <!--END供应商-->
                            <!--要货日期-->
                            <label class="col-md-2 control-label" for="ctime"
                                   style="text-align: center;line-height: 36px">要货日期</label>
                            <div class="col-md-3" id="needparent">
                                <input class="form-control" id="need" name="need"
                                       placeholder="要货日期" readonly
                                       th:value="${#dates.format(sell.need, 'yyyy-MM-dd')}" type="text">


                            </div>
                            <!--END要货日期-->
                        </div>
                        <!--注释-->
                        <div class="form-group col-md-10 ">
                            <label class="col-md-2 control-label" for="comment"
                                   style="text-align: center;line-height: 36px">备注</label>
                            <div class="col-md-8">
                                <input class="form-control" id="comment" name="comment" readonly
                                       placeholder=".....备注....." th:text="${sell.comment}" type="text">
                            </div>
                        </div>
                </form>
                </div>
                <!--END订单-->
                <!--添加明细按钮组-->
                <!--<div class="form-group col-md-10 ">

                    <label class="col-md-2 control-label" for="status"
                           style="text-align: center;line-height: 36px">状态</label>
                    <div class="col-md-4">
                        <input class="form-control" id="status" name="status"
                               placeholder=".....状态....." th:value="${sell_status_map[sell.status]}" type="text">
                    </div>


                    <label class="col-md-2 control-label"
                           style="text-align: center;line-height: 36px">合计</label>
                    <label class="col-md-4 control-label" id="totalcomsump"
                           style="text-align: center;line-height: 36px;color: darkblue">0.0</label>

                    </div>-->
                <!--END添加明细按钮组-->

                <!--添加明细-->
                <div id="detail-table">
                    <!--<form action="#!" class="horizontal " id="add-detail-form" method="post">
                        &lt;!&ndash;商品条目&ndash;&gt;
                        <div class="col-md-3 form-group">
                            <select class="form-control" id="goodlist" name="goodlist" size="1">
                                <option th:each="good:${goodlist}" th:text="${good.name}"
                                        th:value="${good.id}">请选择
                                </option>
                            </select>
                        </div>-->
                        <!--END商品条目-->
                        <!--备用隐藏的现可用的商品条码-->
                        <!--<div class="col-md-3 form-group" hidden="hidden">
                            <table class="form-control" id="owngoodlist" name="goodlist" size="1">
                                &lt;!&ndash;<option th:each="good:${allgoodlist}" th:text="${good.name}"
                                        th:value="${good.id}">请选择
                                </option>&ndash;&gt;
                                <tr th:each="allgood:${goodlist}">
                                    <td class="owngoodlist-id" th:text="${allgood.id}"></td>
                                    <td class="owngoodlist-name" th:text="${allgood.name}"></td>
                                    <td class="owngoodlist-spec" th:text="${allgood.spec}"></td>
                                    <td class="owngoodlist-unit" th:text="${allgood.unit}"></td>
                                </tr>
                            </table>
                        </div>-->
                        <!--END备用隐藏的商品条码-->
                        <!--备用隐藏的商品条码-->
                        <!--<div class="col-md-3 form-group" hidden="hidden">
                            <table class="form-control" id="allgoodlist" name="allgoodlist" size="1">
                                &lt;!&ndash;<option th:each="good:${allgoodlist}" th:text="${good.name}"
                                        th:value="${good.id}">请选择
                                </option>&ndash;&gt;
                                <tr th:each="allgood:${allgoodlist}">
                                    <td class="allgoodlist-id" th:text="${allgood.goodPO.id}"></td>
                                    <td class="allgoodlist-name" th:text="${allgood.goodPO.name}"></td>
                                    <td class="allgoodlist-spec" th:text="${allgood.goodPO.spec}"></td>
                                    <td class="allgoodlist-unit" th:text="${allgood.goodPO.unit}"></td>
                                </tr>
                            </table>
                        </div>-->
                        <!--END备用隐藏的商品条码-->
                        <!--商品数量-->
                        <!--<div class="col-md-3">
                            <input class="form-control" id="itemcount" name="count"
                                   placeholder="数量"
                                   type="number">
                        </div>
                        &lt;!&ndash;END商品数量&ndash;&gt;
                        &lt;!&ndash;商品单价&ndash;&gt;
                        <div class="col-md-3">
                            <input class="form-control" id="itemprice" max="any"
                                   min="0" name="price" pattern="[0-9].[0-9][0-9]"
                                   placeholder="商品单价" type="number">
                        </div>
                        &lt;!&ndash;END商品单价&ndash;&gt;

                        &lt;!&ndash;添加明细条目按钮&ndash;&gt;
                        <div class="form-group col-md-1">
                            <button
                                    class="btn-xs btn-info ajax-post"
                                    id="add-item-to-detail-btn"
                                    type="button">添加
                            </button>
                        </div>-->
                        <!--END添加明细条目按钮-->
                    </form>

                    <!--END添加明细条目-->
                    <table class="table table-bordered">
                        <thead id="goodheader">
                        <tr>
                            <!--                <th>序号</th>-->
                            <th hidden="hidden">id</th>
                            <th>名称</th>
                            <!--    <th>角色图标</th>-->
                            <th>商品规格</th>
                            <!--                                            <th>包装</th>-->
                            <th>计量单位</th>
                            <th>单价</th>
                            <th>库存</th>
                            <th>数量</th>
                            <th>计价</th>
                           <!-- <th>操作</th>-->
                        </tr>
                        </thead>
                        <tbody id="selldetail">

                        <tr th:each="detail:${sell.sellDetailPOList}">
                            <td class="itemid" hidden="hidden" th:text="${detail.id}"></td>
                            <td class="itemgoodid" hidden="hidden" th:text="${detail.goodPO.id}"></td>
                            <td class="itemgoodname" th:text="${detail.goodPO.name}"></td>
                            <td class="itemgoodspec" th:text="${detail.goodPO.spec}"></td>
                            <td class="itemgoodunit" th:text="${detail.goodPO.unit}"></td>
                            <td class="itemprice" th:text="${detail.price}"></td>
                            <td class="repogoodcount" th:text="${repomap[detail.goodPO.id]}"></td>
                            <!--                                html += '<td class="repogoodcount">' + detail.repogoodcount + '</td>'-->
                            <td class="itemcount" th:text="${detail.goodcount}"></td>
                            <td class="itemsum" th:text="${detail.price*detail.goodcount}"></td>
                            <!--<td>
                                <div class="btn-group">
                                    <a class="btn btn-xs btn-default removegood"
                                       data-toggle="tooltip"
                                       href="#" th:val="${detail.goodPO.id}" title="移除">
                                        <i class="mdi mdi-alert-outline"></i>
                                    </a>
                                </div>
                            </td>-->
                        </tr>
                        </tbody>
                    </table>
                </div>
                <!--END添加明细-->

                <!--生成订单按钮组-->
                <div class="form-group col-md-10">
                    <!--<button
                            class="btn btn-primary ajax-post col-md-2"
                            id="save-sell-btn"
                            target-form="add-form"
                            type="button">保存订单
                    </button>-->

                    <button
                            class="btn btn-default col-md-2"
                            onclick="history.back(-1);return false;"
                            type="button">返 回
                    </button>
                </div>

                <!--计算库存-->
                <div hidden="hidden">
                    <table th:id="repomap">
                        <tr th:each="repo:${repomap}">
                            <td class="repokey" th:text="${repo.key}"></td>
                            <td class="repovalue" th:text="${repo.value}"></td>
                        </tr>
                    </table>
                </div>

                <!--END生成订单按钮组-->

            </div>
    </main>
    <!--End 页面主要内容-->
</div>
</div>

<div th:insert="common/fragment::tail-script"></div>
<!--日期选择插件-->
<script th:src="@{/static/admin/js/bootstrap-datepicker/bootstrap-datepicker.min.js}"></script>
<link rel="stylesheet"
      th:src="@{/static/admin/js/bootstrap-datepicker/bootstrap-datepicker3.min.js}">
<link rel="stylesheet" th:href="@{/static/admin/css/style.min.css}">
<style>
    .lessgood {
        color: #ac2925;
        font-weight: bolder;
        text-decoration-line: line-through;
    }
</style>

<script type="text/javascript">

    $(document).ready(function () {
// 生成库存表
        let repomap = new Map()
        $('#repomap tr').each(function (i, e) {
            let key = $(this).children('.repokey').text()
            let value = $(this).children('.repovalue').text()

            repomap.set(key, value)
        })

// END生成库存表
// 初始化 非spare状态的输入框为disable
        if (!($('#sellstatus').val() == 0 || $('#sellstatus').val() == 2)) {
            console.log($('#sellstatus').val())
            // 非编制状态 提示
            confirmMsg("本订单非编制状态,只能浏览")
            // 隐藏移除南江
            $('.removegood').each(function (i, e) {
                $(e).parents('td').attr('hidden', true)
            })
            // 禁用保存按钮
            $('#save-sell-btn').hide()


            $('input').attr('readonly', true)
            let parent = $('#needparent')
            let val = $('#need').val()
            let html = '<input class="form-control" id="need" name="need"\n' +
                '                                       placeholder="要货日期" readonly\n' +
                '                                       value="' + val + '" type="text">'
            $('#needparent').empty()
            $('#needparent').append(html)


            $('#add-detail-form').attr('hidden', true)
        }
// END初始化 非spare状态的输入框为disable

// 订单
        let sell = null
        let good = null
// 明细条目
        let retainary = []
        let vdetaillist = [] // 已有的明细,待初始化

        // 初始化 已有的明细
        $('#selldetail tr').each(function (i, e) {
            let itemid = $(e).children('.itemid').text()
            let itemgoodid = $(e).children('.itemgoodid').text()
            let itemgoodname = $(e).children('.itemgoodname').text()
            let itemgoodspec = $(e).children('.itemgoodspec').text()
            let itemgoodunit = $(e).children('.itemgoodunit').text()
            let itemprice = $(e).children('.itemprice').text()
            let itemcount = $(e).children('.itemcount').text()
            let data = {
                id: itemid,
                good: {
                    id: itemgoodid,
                    name: itemgoodname,
                    spec: itemgoodspec,
                    unit: itemgoodunit
                },
                price: itemprice,
                goodcount: itemcount
            }
            vdetaillist.push(data)

        });

// 商品列表
        // 商品列表完整
        let vallgoodlist = []
        // 初始化供货商 所拥有的所有商品
        $('#allgoodlist tr').each(function (i, e) {
            let id = $(e).children('.allgoodlist-id').text()
            let name = $(e).children('.allgoodlist-name').text()
            let spec = $(e).children('.allgoodlist-spec').text()
            let unit = $(e).children('.allgoodlist-unit').text()
            let data = {
                id: id,
                name: name,
                spec: spec,
                unit: unit
            }
            vallgoodlist.push(data)

        })


        // 初始化 可选择的商品列表
        vgoodlist = []
        $('#owngoodlist tr').each(function (i, e) {
            let id = $(e).children('.owngoodlist-id').text()
            let name = $(e).children('.owngoodlist-name').text()
            let spec = $(e).children('.owngoodlist-spec').text()
            let unit = $(e).children('.owngoodlist-unit').text()
            let data = {
                id: id,
                name: name,
                spec: spec,
                unit: unit
            }
            vgoodlist.push(data)

        })

        // 重置商品列表
        $('#goodlist').empty()
        let html = ''
        for (let i = 0; i < vgoodlist.length; i++) {
            html += '<option value="' + vgoodlist[i].id + '">' + vgoodlist[i].name + ' | 包装:'
                + vgoodlist[i].spec + ' | 单位:' + vgoodlist[i].unit + '</option>'

        }
        $('#goodlist').append(html)


        // 要移除的明细数据
        let removeid = null

// 合计订单金额
        /*        let totalcomsump = 0.0*/
        function showTotal() {
            let total = 0
            for (let i = 0; i < vdetaillist.length; i++) {
                total = total + vdetaillist[i].price * vdetaillist[i].goodcount
            }
            total = total.toFixed(2)

            $('#totalcomsump').text(total)
        }


// 添加商品到明细
        $('#add-item-to-detail-btn').click(function () {
            if (vgoodlist == null || vgoodlist.length <= 0) {
                confirmMsg("已添加供应商的全部商品")
                return false;
            }

            let goodid = $('#goodlist').val()
            let itemcount = $('#itemcount').val()
            let itemprice = $('#itemprice').val()

            // 验证
            if (goodid === '') {
                confirmMsg('请选择商品')
                return false;
            }
            if (itemcount === '' || itemcount < 0) {
                confirmMsg('数量不正确')
                return false;
            }
            if (itemprice === '' || itemprice < 0) {
                confirmMsg('价格不正确')
                return false;
            }

            let tmpary = []
            good = null
            // 取 商品值 生成临时数组,在原商品数组的基础上减去提取的数组
            for (let i = 0; i < vgoodlist.length; i++) {

                if (parseInt(vgoodlist[i].id) === parseInt(goodid)) {
                    good = vgoodlist[i]
                } else {
                    tmpary.push(vgoodlist[i])
                }
            }

            // 重置vgoodlist
            vgoodlist = []
            for (let i = 0; i < tmpary.length; i++) {
                vgoodlist.push(tmpary[i])
            }
            // 重置商品列表
            $('#goodlist').empty()
            let html = ''
            for (let i = 0; i < vgoodlist.length; i++) {
                html += '<option value="' + vgoodlist[i].id + '">' + vgoodlist[i].name + ' | 包装:'
                    + vgoodlist[i].spec + ' | 单位:' + vgoodlist[i].unit + '</option>'

            }
            $('#goodlist').append(html)

            html = ''
            // 打开明细标题
            $('#goodheader').attr('hidden', false)

            let itemgoodid = good['id']
            let itemgoodname = good['name']
            let itemgoodspec = good['spec']
            let itemgoodunit = good['unit']
            let repocount = repomap.get(itemgoodid)
            // 点击到明细列表
            let detail = {
                id: null,
                good: {
                    id: itemgoodid,
                    name: itemgoodname,
                    spec: itemgoodspec,
                    unit: itemgoodunit,
                },
                price: itemprice,
                repocount: repocount,

                goodcount: itemcount
            }
            vdetaillist.push(detail)

            html += '<tr>'
            html += '<td hidden="hidden" class="itemid">' + detail.id + '</td>'
            html += '<td hidden="hidden" class="itemgoodid">' + detail.good.id + '</td>'
            html += '<td class="itemgoodname">' + detail.good.name + '</td>'
            html += '<td class="itemgoodspec">' + detail.good.spec + '</td>'
            html += '<td class="itemgoodunit">' + detail.good.unit + '</td>'
            html += '<td class="itemprice">' + detail.price + '</td>'
            html += '<td class="repogoodcount">' + detail.repocount + '</td>'
            html += '<td class="itemcount">' + detail.goodcount + '</td>'
            html += '<td class="itemsum">' + detail.price * detail.goodcount + '</td>'
            html += ' <td>\n'
                + '                  <div class="btn-group">\n'
                + '                    <a class="btn btn-xs btn-default removegood"\n'
                + '                       data-toggle="tooltip"\n'
                + '\n'
                + '                       href="#" val="' + detail.good.id + '" title="移除">\n'
                + '                      <i class="mdi mdi-alert-outline"></i>\n'
                + '                    </a>\n'
                + '                  </div>\n'
                + '                </td>'
            html += '</tr>'

            $('#selldetail').append(html)

            // 缺货 添加类 lessgood 行显示红色
            $('#selldetail tr').each(function (i, e) {
                let tmprepogoodcount = $(e).children('.repogoodcount').text()
                let tmpitemcount = $(e).children('.itemcount').text()
                if (parseInt(tmprepogoodcount) < parseInt(tmpitemcount)) {
                    $(this).addClass('lessgood')
                } else {
                    $(this).removeClass('lessgood')
                }

            })
            //END 缺货 添加类 lessgood 行显示红色
            showTotal()
        });
// END添加商品到明细

// 细目中的移除按钮

        $('#selldetail').on('click', '.removegood', function (e) {
            removeid = $(this).attr('val')


            // 重新生成商品下拉列表
            for (let i = 0; i < vallgoodlist.length; i++) {
                if (parseInt(vallgoodlist[i].id) === parseInt(removeid)) {
                    vgoodlist.push(vallgoodlist[i])
                    break
                }
            }


            $('#goodlist').empty()
            let html = ''
            for (let i = 0; i < vgoodlist.length; i++) {
                html += '<option value="' + vgoodlist[i].id + '">' + vgoodlist[i].name + ' | 包装:'
                    + vgoodlist[i].spec + ' | 单位:' + vgoodlist[i].unit + '</option>'

            }
            $('#goodlist').append(html)


            // 获取明细条目 不包含要删除的
            retainary = []
            for (let i = 0; i < vdetaillist.length; i++) {
                if (parseInt(vdetaillist[i].good.id) !== parseInt(removeid)) {
                    retainary.push(vdetaillist[i])
                }
            }

            vdetaillist = []
            for (let i = 0; i < retainary.length; i++) {
                vdetaillist.push(retainary[i])
            }


            // 重新生成明细表格
            // 如果是空表
            html = ''
            if (retainary == null || retainary.length <= 0) {
                $('#selldetail').empty()
                $('#goodheader').attr('hidden', true)
                showTotal()
                e.preventDefault()
                return false;
            } else {
                // 非空则重新生成明细表格
                for (let i = 0; i < retainary.length; i++) {
                    let itemid = retainary[i]['id']
                    let itemgoodid = retainary[i].good.id
                    let itemgoodname = retainary[i].good.name
                    let itemgoodspec = retainary[i].good.spec
                    let itemgoodunit = retainary[i].good.unit

                    let itemprice = retainary[i]['price']
                    let repogoodcount = repomap.get(itemgoodid)
                    let itemcount = retainary[i]['goodcount']

                    html += '<tr>'
                    html += '<td hidden="hidden" class="itemid">' + itemid + '</td>'
                    html += '<td hidden="hidden" class="itemgoodid">' + itemgoodid + '</td>'
                    html += '<td class=itemgoodname">' + itemgoodname + '</td>'
                    html += '<td class="itemgoodspec">' + itemgoodspec + '</td>'
                    html += '<td class="itemgoodunit">' + itemgoodunit + '</td>'
                    html += '<td class="itemprice">' + itemprice + '</td>'
                    html += '<td class="repogoodcount">' + repogoodcount + '</td>'
                    html += '<td class="itemcount">' + itemcount + '</td>'
                    html += '<td class="itemsum">' + itemcount * itemprice + '</td>'
                    html += ' <td>\n'
                        + '                  <div class="btn-group">\n'
                        + '                    <a class="btn btn-xs btn-default removegood"\n'
                        + '                       data-toggle="tooltip"\n'
                        + '\n'
                        + '                       href="#" val="' + itemgoodid + '" title="移除">\n'
                        + '                      <i class="mdi mdi-alert-outline"></i>\n'
                        + '                    </a>\n'
                        + '                  </div>\n'
                        + '                </td>'
                    html += '</tr>'
                }
                $('#selldetail').empty()
                $('#selldetail').append(html)
                showTotal()
                fun_lessgood()
                e.preventDefault()
                return false;
            }


            e.preventDefault()
        })


// END细目中的移除按钮

// 货币保留2位,不小于0
        $('#itemprice').blur(function () {
            let val = parseFloat($('#itemprice').val())
            if (val == null || val == 'NaN') {
                $(this).val(0)
                return
            }

            val = val.toFixed(2)

            if (val < 0) {
                confirmMsg("输入单价有误")
            }
            $(this).val(val)

            //set the numeric value to a number input
            // $(this).value = this.value.replace(/,/g, "")
        });
//END货币保留2位

// 数量为整数,不小于0
        $('#itemcount').blur(function () {
            let val = parseInt($('#itemcount').val())

            if (val == null || val == 'NaN') {
                $(this).val(0)
                return
            }

            if (val < 0) {
                confirmMsg("输入单价有误")
            }
            $(this).val(val)

        });
//END数量为整数,不小于0

// 保存订单
        $('#save-sell-btn').click(function () {
            let sellid = $('#sellid').val()
            let sellname = $('#sellno').val()
            let sellcreateTime = $('#ctime').val()
            let sellcustid = $('#custid').val()
            let sellneed = $('#need').val()
            let sellcomment = $('#comment').val()

            let sell = {
                id: sellid,
                name: sellname,
                createTime: sellcreateTime,
                custPO: {id: sellcustid},
                need: sellneed,
                comment: sellcomment

            }

            let selldetaillist = []
            for (let i = 0; i < vdetaillist.length; i++) {
                let price = vdetaillist[i].price
                let goodcount = vdetaillist[i].goodcount
                let good = {id: vdetaillist[i].good.id}
                let tmp = {
                    price: price,
                    goodcount: goodcount,
                    goodPO: good
                }
                selldetaillist.push(tmp);
            }
            let data = {
                id: sell.id,
                name: sell.name,
                createTime: sell.createTime,
                need: sell.need,
                comment: sell.comment,
                custPO: sell.custPO,
                sellDetailPOList: selldetaillist
            }

            post_ajax("/sell/savemodifysellPO.ajax", data, "/sell/selllist.do")
        });
// END保存订单
// 合计金额
        showTotal()


    });

</script>

<script>
    // 缺货 添加类 lessgood 行显示红色
    function fun_lessgood(){
        $('#selldetail tr').each(function (i, e) {
            let tmprepogoodcount = $(e).children('.repogoodcount').text()
            let tmpitemcount = $(e).children('.itemcount').text()
            if (parseInt(tmprepogoodcount) < parseInt(tmpitemcount)) {
                $(this).addClass('lessgood')
            } else {
                $(this).removeClass('lessgood')
            }

        })
    }
    fun_lessgood()
    //END 缺货 添加类 lessgood 行显示红色


</script>
</body>
</html>